<!-- 测试响应式性能消耗 -->
<template>
    <span draggable="true">for循环计数,测试响应式性能消耗(对普通变量循环操作再赋值给响应式变量比直接操作响应式变量更高效)</span>
    <span>{{ count }}</span>
    <el-button @click="startCount">startCount</el-button>
    <input type="text">
</template>

<script setup>
import { ref } from "vue";

const count = ref(0)
const startCount = () => {
    const n = 10000000; // 循环次数
    // 获取开始时间
    const startTime = new Date().getTime();

    // for 循环操作
    for (let i = 0; i < n; i++) {
        // 循环操作
        count.value += 1
    }

    // 获取结束时间
    const endTime = new Date().getTime();

    // 计算时间差
    const timeDiff = endTime - startTime;

    console.log(`for 循环时间消耗：${timeDiff} 毫秒`);

}
</script>

<style lang="scss" scoped>
</style>